<template>
  <div>
    <div style="margin-top: 30px">
      <van-nav-bar
          left-text="返回"
          left-arrow
          @click-left="back()"
      />
      <van-image
          round
          width="10rem"
          height="10rem"
          src="https://img2.baidu.com/it/u=1841769557,1957123182&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      />
    </div>
    <div>
      <van-form>
        <van-cell-group inset>
          <van-field
              v-model="user.phone"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]" @change="checkPhone()"
          />
          <van-field
              v-model="user.name"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              v-model="user.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
              v-model="user.code"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary" :disabled="btn1" @click="sendRegisterCode()">{{ this.sendcode }}</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" @click="register()">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "RegisterView",
  data() {
    return {
      sendcode:"发送验证码",
      codetime:60,
      user: {
        name: "",
        password: "",
        phone: "",
        code: ""
      },
      btn1: false,
    }
  }, methods: {
    register() {
      this.axios.post('/user/register.do', this.user).then((res) => {
        if (res.data.code === 200) {
          this.$router.push("/login")
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    sendRegisterCode() {
      this.axios.get('/sms/sendRegisterCode.do?phone=' + this.user.phone).then((res) => {
        if (res.data.code === 200) {
          this.btn1 = true;
          var t = setInterval(() => {
            if(this.codetime>0){
              this.codetime -= 1;
              this.sendcode = this.codetime+" S"
            }else{
              this.btn1 = false;
              this.sendcode = '发送验证码';
              this.codetime = 60
              clearInterval(t)
            }
          }, 1000)
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    checkPhone() {
      this.axios.get("/user/checkphone.do?phone=" + this.user.phone).then((res) => {
        if (res.data.code === 200) {
          this.$toast("该账号已注册")
        }
      })
    },
    back(){
      history.back();
    }
  }
}
</script>

<style scoped>

</style>